<!--
 * @Author: Bennty
 * @Date: 2024-08-23 10:50:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-10-31 16:28:07
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <el-card class="total-card" shadow="never">
            <!-- 新增与搜索 -->
            <el-row :gutter="8" class="mb8" justify="space-between">
                <el-col :span="1.5">
                    <el-button type="success" plain icon="Plus" @click="handleClickAdd">新增刀线</el-button>
                    <el-button type="primary" plain icon="Edit" @click="handleClickEdit">编辑刀线</el-button>
                    <el-button type="danger" plain icon="Delete" @click="handleClickDelete">删除刀线</el-button>
                    <el-button type="warning" plain icon="Refresh" @click="handleClickReplace">更换刀线</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-form :model="queryParams" ref="queryFormRef"  :inline="true">
                        <el-form-item label="产品分类" prop="knifeType">
                            <el-select v-model="queryParams.knifeType">
                                <el-option v-for="item in knife_plate_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="展示方式" prop="sortMethod">
                            <el-select v-model="queryParams.sortMethod">
                                <el-option label="全部" :value="0"></el-option>
                                <el-option label="最高使用数" :value="1"></el-option>
                                <el-option label="最低使用数" :value="2"></el-option>
                                <el-option label="最早创建时间" :value="3"></el-option>
                                <el-option label="最晚创建时间" :value="4"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="模糊搜索" prop="knifePlateName">
                            <el-input v-model="queryParams.knifePlateName" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <!-- 刀版管理主页面 -->
            <el-row :gutter="20">
                <!-- 上传/下载刀版信息 -->
                <el-col :span="5">
                    <!-- 上传刀版 -->
                    <el-card class="info-card" title="上传刀版" >
                        <el-descriptions title="最近的上传日志" :column="1">
                            <el-descriptions-item v-for="item in uploadedList" :key="item.id" :label="item.knifeModelName">
                                <el-tag type="success" round effect="dark" size="large">{{ `上传于${item.date}` }}</el-tag>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                    <!-- 下载刀版 -->
                    <el-card class="info-card" title="下载刀版" style="margin-top: 20px" >
                        <el-descriptions class="record-container" title="最近的下载日志" :column="1">
                            <el-descriptions-item v-for="item in downloadList" :key="item.id" :label="item.knifeModelName">
                                <el-tag type="success" round effect="dark" size="large">{{ `上传于${item.date}` }}</el-tag>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                </el-col>
                <!-- 所有刀版 -->
                <el-col :span="19">
                    <div class="replace">
                        <span class="replace-info">{{ `当前有${needReplaceData.length}个刀版需要更换 请及时查看` }}</span>
                        <el-link type="primary" style="margin-left: 10px"> 查看详情 </el-link>
                    </div>
                    <el-card>
                        <el-row :gutter="10">
                            <el-col v-for="item in knifeModelList" :key="item.id" :span="8" style="margin-top: 20px;">
                                <div :class="`knifeModel-info ${knifeModelData?.id == item.id? 'knifeModel-info-selected':''}`" @click="handleClickKnifeModel(item)">
                                    <div class="knifeModel-info-header">
                                        <el-icon color="rgb(105,175,240)"><FolderChecked /></el-icon>
                                        <div>
                                            <span class="knifeModel-name">
                                                <el-link style="font-size: 25px" type="primary" @click="handleClickTitle(item)">{{ item.knifePlateName }}</el-link>
                                            </span>
                                            <span class="knifeModel-time">{{ `当前刀版使用次数：${item.downloadNumber || 0} 次` }}</span>
                                        </div>
                                    </div>
                                    <el-row :gutter="3">
                                        <el-col :span="10">
                                            <span class="knifeModel-date">
                                                {{ `上传日期：${item.createTime}` }}
                                            </span>
                                        </el-col>
                                        <el-col :span="7">
                                            <span class="knifeModel-date">
                                                {{ `上传人：${item.createByName}` }}
                                            </span>
                                        </el-col>
                                        <el-col :span="6">
                                            <span class="knifeModel-date">
                                                {{ `下载次数：${item.downloadNumber || 0}` }}
                                            </span>
                                        </el-col>
                                    </el-row>
                                    <el-row class="knifeModel-tag-line" :gutter="15">
                                        <el-col v-for="(tag) in item?.dataList" :span="6" :key="tag?.id">
                                            <el-tag class="knifeModel-tag" 
                                            :style="{color:`rgb(${tagTypes.filter((tagType:any)=>tagType.value == tag.labelType)[0].color})`,
                                                    background:`rgba(${tagTypes.filter((tagType:any)=>tagType.value == tag.labelType)[0].color}, 0.2)`,
                                                    border:`solid,1px,rgb(${tagTypes.filter((tagType:any)=>tagType.value == tag.labelType)[0].color})`}"
                                            >{{ tag.label }}</el-tag>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                @pagination="getKnifeModelList" />
        </el-card>
        <addKnifeModel :visible="addKnifeModelVisible" :types="knife_plate_type" :tags="tagTypes" @submit="handleSubmitAdd" @close="handleCloseAdd"/>
        <editKnifeModel :visible="editKnifeModelVisible" :types="knife_plate_type" :tags="tagTypes" :data="newlyKnifeModelData" @submit="handleSubmitEdit"  @close="handleCloseEdit"/>
        <replaceKnifeMoodel :visible="replaceKnifeModelVisible" :data="newlyKnifeModelData" @submit="handleSubmitReplace" @close="handleCloseReplace"/>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { KnifeModelRecordVO, KnifeModelVO } from '@/api/sj/warehouse/knifeModel/types';
import addKnifeModel from './components/addKnifeModel.vue';
import editKnifeModel from './components/editKnifeModel.vue';
import replaceKnifeMoodel from './components/replaceKnifeModel.vue';
import { getKnifeModelListApi, getKnifeModelReplaceApi, getKnifeModelDetailsApi , deleteKnifeModelApi } from '@/api/sj/warehouse/knifeModel';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { knife_plate_type } = toRefs<any>(proxy?.useDict('knife_plate_type'));
const router = useRouter();
const queryFormRef = ref<FormInstance>();
const data = reactive({
    queryParams:{
        knifeType: undefined,
        knifePlateName: undefined,
        sortMethod: undefined,
        pageNum: 1,
        pageSize: 30
    },
});
const { queryParams } = toRefs(data);
const uploadedList = ref<KnifeModelRecordVO[]>([]);
const downloadList = ref<KnifeModelRecordVO[]>([]);
const knifeModelList = ref<KnifeModelVO[]>([]);
const needReplaceData = ref<any[]>([]);
const totalData = ref(0);
const addKnifeModelVisible = ref(false);
const knifeModelData = ref<any>();
const newlyKnifeModelData = ref<any>();
const editKnifeModelVisible = ref(false);
const replaceKnifeModelVisible = ref(false);
const tagTypes = [
    {
        label: '客户标签',
        value: '1',
        color: '223, 155, 249'
    },
    {
        label: '特征标签',
        value: '2',
        color: '230, 163, 63',
    },
    {
        label: '尺寸标签',
        value: '3',
        color: '255, 110, 143'
    }
];

const getKnifeModelList = async () => {
    const { rows, total } = await getKnifeModelListApi(queryParams.value);
    knifeModelList.value = rows;
    totalData.value = total;
};

const getReplaceInfo = async () => {
    const { data } = await getKnifeModelReplaceApi();
};

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getKnifeModelList();
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

/** 选择刀线 */
const handleClickKnifeModel = (item: any) =>{
    knifeModelData.value = item;
    console.log(knifeModelData.value)
};

const handleClickAdd = ()=>{
    addKnifeModelVisible.value = true;
};

/**提交新增刀线 */
const handleSubmitAdd = (result: boolean) => {
    if(result){
        getKnifeModelList();
    };
};

const handleCloseAdd = ()=>{
    addKnifeModelVisible.value = false;
};


/** 点击查看详情 */
const handleClickTitle = (item: any) => {
    router.push(`knifeModel/details/${item.id}`);
};


/** 点击编辑刀线 */
const handleClickEdit = async () => {
    if(knifeModelData.value){
        const { code, data } = await getKnifeModelDetailsApi(knifeModelData.value.id);
        newlyKnifeModelData.value = data;
        if(code == 200){
            editKnifeModelVisible.value = true;
        };
    };
};

const handleSubmitEdit = (result: boolean) => {
    if(result){
        getKnifeModelList();
    }
};

const handleCloseEdit = () => {
    editKnifeModelVisible.value = false;
};

/** 删除刀版 */
const handleClickDelete = async () => {
    if(knifeModelData.value){
        const { code } = await deleteKnifeModelApi(knifeModelData.value.id);
        if(code == 200){
            getKnifeModelList();
        };
    };
};

/** 点击更换刀版 */
const handleClickReplace = async() => {
    if(knifeModelData.value){
        const { code, data } = await getKnifeModelDetailsApi(knifeModelData.value.id);
        newlyKnifeModelData.value = data;
        if(code == 200){
            replaceKnifeModelVisible.value = true;
        };
    };
};

const handleSubmitReplace = (result: boolean) => {
    if(result){
        getKnifeModelList();
    };
};

const handleCloseReplace = () => {
    replaceKnifeModelVisible.value = false;
};

onMounted(()=>{
    getKnifeModelList();
    getReplaceInfo();
    for(let i = 1; i<=6; i++){
        let knifeModelUploadData = {
            id: i,
            knifeModelName: `金皇冠的刀版${i}.AI`,
            date: `2021-08-0${i}`
        };
        let knifeModelDownloadData = {
            id: i,
            knifeModelName: `优一朵的刀版${i}.AI`,
            date: `2021-08-1${i}`
        };
        uploadedList.value.push(knifeModelUploadData);
        downloadList.value.push(knifeModelDownloadData);
    }
});

</script>

<style lang="scss" scoped>
.replace{
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    .replace-info{
        display: block;
        font-size: 30px;
        font-weight: bold;
    }
}
.knifeModel-info-selected{
    border: solid 3px rgb(105,175,240) !important;
}
.knifeModel-info{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    border-radius: 10px;
    border: solid 3px rgb(187,187,187);
    &:hover{
        cursor: pointer;
    }
    .knifeModel-info-header{
        display: flex;
        align-items: center;
        margin-bottom: 30px;
    }
    
    .el-icon{
        font-size: 60px;
        display: block;
        margin-right: 10px;
    }
    .knifeModel-name{
        font-size: 25px;
        display: block;
    };
    .knifeModel-time{
        font-size: 19px;
    }
    .knifeModel-date-line{
        font-size: 15px;
    }
    .knifeModel-tag-line{
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .knifeModel-tag{
        width: 100%;
        height: 80px;
        border-radius: 10px;
        font-size: 18px;
    }
}
</style>